<template>
    <div class="page-wrap">
        <h2>用于大屏看板展示的表格组件，自动对表格内容进行轮播，支持鼠标悬停，支持滚动到底事件通知</h2>
        <h3>参数</h3>
        <el-table :data="documentTableData" style="width: 100%" border>
            <el-table-column prop="name" label="参数" width="180">
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="180">
            </el-table-column>
            <el-table-column prop="description" label="说明">
            </el-table-column>
        </el-table>
        <h3>注意事项</h3>
        <el-table :data="PrecautionsTableData" style="width: 100%" border>
            <el-table-column prop="name" label="注意点" width="180">
            </el-table-column>
            <el-table-column prop="description" label="说明">
            </el-table-column>
        </el-table>
        <h3 style="color: #409EFF;">效果</h3>
        <div style="height:300px;border: 1px solid #ccc;border-radius: 5px;">
            <el-table-carousel :data="tableData" @scrollToEnd="scrollToEndEvent('elTableCarousel1')" ref="elTableCarousel1">
                <table class="table" border="0" cellspacing="0" cellpadding="4">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>日期</th>
                                <th>地址</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in tableData" :key="index">
                                <td>{{ index+1 }}</td>
                                <td>{{ item.cname }}</td>
                                <td>{{ item.date }}</td>
                                <td>{{ item.addr }}</td>
                            </tr>
                        </tbody>
                    </table>
            </el-table-carousel>
        </div>
        <h3>基本使用</h3>
        <div>
            <el-input type="textarea" :rows="14" placeholder="请输入内容" :value="code">
            </el-input>
        </div>
    </div>
</template>

<script>
import elTableCarousel from '@/components/el-table-carousel.vue'
import Mock from "mockjs"

export default{
    components: {
        elTableCarousel
    },
    data(){
        return {
            code: ` <div style="height:300px;border: 1px solid #ccc;border-radius: 5px;">
            <el-table-carousel :data="tableData" @scrollToEnd="scrollToEndEvent('elTableCarousel1')" ref="elTableCarousel1">
                <table class="table" border="0" cellspacing="0" cellpadding="4">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>日期</th>
                            <th>地址</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in tableData" :key="index">
                            <td>{{ index+1 }}</td>
                            <td>{{ item.cname }}</td>
                            <td>{{ item.date }}</td>
                            <td>{{ item.addr }}</td>
                        </tr>
                    </tbody>
                </table>
            </el-table-carousel>
        </div>`,

            documentTableData: [
                {
                    name: "data", type: "Array",
                    description: "表格数据,用于监听数据变动,以便自动重置滚动"
                },
                {
                    name: "duration", type: "Number",
                    description: "滚动间隔（毫秒）,默认30"
                },
                {
                    name: "delay", type: "Number",
                    description: "滚动延迟（毫秒）,默认1000"
                },
                {
                    name: "stepDelay", type: "Number",
                    description: "步进延迟（毫秒），每滚动一行后，自动暂停多久,默认0"
                },
                 {
                    name: "rowMark", type: "String",
                    description: "行标识(用于算行高,步进模式专用)，默认tbody tr"
                },
                {
                    name: "hoverStop", type: "Boolean",
                    description: "鼠标移入是否停止滚动，默认true"
                },
                {
                    name: "@scrollToEnd", type: "Function",
                    description: "滚动到底事件"
                },
                {
                    name: "@noScroll", type: "Function",
                    description: "内容没有溢出，导致无法产生滚动事件"
                },
                {
                    name: "resetScroll", type: "method",
                    description: "滚动到底后，通过ref调用该方法，从头开始滚动"
                }
            ],//文档

            PrecautionsTableData: [
                {
                    name: "外层容器",
                    description: "外层容器必须有固定的高度，以便插件初始化"
                },
                {
                    name: "表格内容",
                    description: "表格内容需要使用插槽完成，方便自定义样式，这也是看板的刚需"
                },
                {
                    name: "表头固定",
                    description: "表头固定通过css样式完成，为了防止内容透过区，thead默认有白色背景，可自行根据项目的背景色进行搭配"
                },
                {
                    name: "滚动条样式",
                    description: "滚动条默认样式复制源码到项目总进行调整，一般滚动条的颜色可根据项目的背景色进行搭配"
                },
            ],//注意事项

            tableData: []
        }
    },
    created(){
        //模拟获取表格数据
        this.getTableData()
    },
    methods: {
        //模拟获取表格数据
        getTableData(){
            setTimeout(()=>{
                 //模拟后台返回数据
                var res = Mock.mock({
                    "code|0-1": 1,
                    "data|20": [
                        {
                            "date": "@date",//特殊类型
                            "addr": "@province",//特殊类型
                            "cname": "@cname",//特殊类型
                        }
                    ],
                })
                this.tableData = res.data
            },100)
        },
        //滚动到底事件
        scrollToEndEvent(ref){
            //这里可以进行数据刷新，分页加载
            console.log('scrollToEndEvent')
            //模拟获取表格数据
            this.getTableData()
            // 也可以重置滚动
            setTimeout(()=>{
                this.$refs[ref].resetScroll()
            },1000)
        },
    }
}
</script>


<style scoped>
.page-wrap{
    padding: 20px;
}
.page-wrap h2{
    margin-top: 0;
}
.table{
    width:100%;
}
.table thead{
    position: sticky;
    background-color: #fff;
    top: 0;
    z-index: 10;
}
</style>